/**
 * 监控组件
 */
import React, { useState, useEffect } from 'react';
// import styles from './index.less';
import styles from './index.less';
import { message } from 'antd';
import imgs from './image';

export default class extends React.Component {
  componentDidMount = () => {};
  state = {
    titleList: [
      {
        title: '数据应用',
        isLine: true,
        monList: [
          { title: '大屏', icon: imgs.BigScreen },
          { title: '驾驶舱', icon: imgs.Cockpit },
          { title: '告警', icon: imgs.Warn },
          { title: '日报', icon: imgs.Daily },
          { title: '月报', icon: imgs.Monthly },
          { title: '智能报表', icon: imgs.SmartReport },
          { title: '随手拍', icon: imgs.AppCache },
        ],
      },
      {
        title: '监控组件',
        isLine: true,
        monList: [
          { title: '应用缓存', icon: imgs.AppCache },
          { title: '应用数据库', icon: imgs.AppDatabase },
          { title: '大数据数库', icon: imgs.BigDataBase },
        ],
      },
      {
        title: '监控组件',
        isLine: true,
        monList: [
          { title: 'SIS调用接口', icon: imgs.SisCallIinterface },
          { title: '大数据列式数据库', icon: imgs.ColumnarDatabase },
          { title: '应用数据库', icon: imgs.AppDatabase },
        ],
      },
      {
        title: '数据源',
        isLine: false,
        monList: [
          { title: 'SIS', icon: imgs.SIS },
          { title: 'NC', icon: imgs.NC },
          { title: 'MIS', icon: imgs.MIS },
          { title: '地磅', icon: imgs.Weighbridge },
          { title: '随手拍', icon: imgs.Pat },
          { title: '钉钉录入', icon: imgs.Dingding },
          { title: '手动导入', icon: imgs.ImportManually },
        ],
      },
    ],
  };
  render() {
    return (
      <div className={styles.root}>
        <div className={styles.child}>
          {this.state.titleList.map((item, index) => {
            return (
              <div key={index} className={styles.box}>
                <div className={styles.childBox}>
                  <div className={styles.title}>{item.title}</div>
                  <div className={styles.monChild}>
                    {item.monList.map((itemMon, index) => {
                      return (
                        <div key={index} className={styles.monChildTitle}>
                          <img src={itemMon.icon}></img>
                          <span>{itemMon.title}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
                {item.isLine && (
                  <div>
                    <div className={styles.boxArrow}></div>
                    <div className={styles.boxLine}></div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
